<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(博客列表)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(1)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h3 class="mb-4"><p class="lh-1">文章</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>新增文章
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/article/publish}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>已发布
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/draft}">
									<span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
									</span>草稿箱
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/trash}">
                                    <span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                    </span>回收箱
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">已发布</h3>
                                <div class="alert alert-success col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-success">
                                    修改成功
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                                <div class="alert alert-error col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-fail">
                                    修改失败，请稍后重试
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table card-table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th class="w-1">ID</th>
                                        <th>标题</th>
                                        <th>发表时间</th>
                                        <th>状态</th>
                                        <th>置顶</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="article : ${page.list}">
                                        <td><span class="text-muted" th:text="${article.id}">001401</span></td>
                                        <td>
                                            <a href="#" class="text-inherit"
                                               th:text="${article.title}"
                                               th:attr="articleId=${article.id}"
                                                onclick="showDetail(this)">
                                                Java设计模式
                                            </a>
                                            <span class="badge bg-red" th:if="${article.top}">置顶</span>
                                        </td>
                                        <td th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd')}">
                                            2020-02-29
                                        </td>
                                        <td th:if="${article.state} == 1">
                                            <span class="status-icon bg-lime"></span> 公开
                                        </td>
                                        <td th:if="${article.state} == 2">
                                            <span class="status-icon bg-warning"></span> 保密
                                        </td>
                                        <td>
                                            <label class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox"
                                                       th:attr="articleId=${article.id},top=!${article.top}"
                                                       th:checked="${article.top}"
                                                       onclick="changeTop(this)">
                                            </label>
                                        </td>
                                        <td>
                                            <button class="btn btn-secondary btn-sm" onclick="getUnAddColumn(this)" th:attr="articleId=${article.id}">添加到专栏</button>
                                            <button class="btn btn-danger btn-sm" onclick="deleteArticle(this)" th:attr="articleId=${article.id}">删除</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="card-body" th:if="${page.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${page.totalNum}]]&nbsp;</b>
                                    篇文章，共<b class="text-red">&nbsp;[[${page.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${page.page}]]&nbsp;</b>页</span>
                                <ul class="pagination center float-right">
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == 1} ? 'disabled' : ''">
                                        <a class="page-link" href="#" tabindex="-1" th:href="'/admin/article/publish?page=' + ${page.page - 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                                <polyline points="15 6 9 12 15 18"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == page.totalPage} ? 'disabled' : ''">
                                        <a class="page-link" href="#" th:href="'/admin/article/publish?page=' + ${page.page + 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round" class="icon">
                                                <polyline points="9 18 15 12 9 6"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true"></div>
    <div th:replace="admin/dashboard :: footer"></div>
    <div class="modal modal-blur fade" id="modal-small" tabindex="-1" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-title">确认删除?</div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-link link-secondary mr-auto"
                            data-dismiss="modal">取消
                    </button>
                    <form method="post" id="deleteArticle">
                        <button name="submit" class="btn btn-danger" style="color: white;">确认删除</button>
                        <input type="hidden" name="id" id="articleId" value="">
                        <input type="hidden" name="_method" value="DELETE">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function showDetail(ele) {
        $.ajax({
            type: "get",
            url: "/admin/article/" + $(ele).attr("articleId"),
            success: function (data) {
                $("#modal-report").html(data);
                $("#modal-report").modal('show');
            },
            error: function () {
            }
        })
    }
    function getUnAddColumn(ele) {
        $.ajax({
            type: "get",
            url: "/admin/column/unAdd",
            data: {"articleId": $(ele).attr("articleId")},
            success: function (data) {
                $("#modal-report").html(data);
                $("#modal-report").modal('show');
            },
            error: function () {
            }
        })
    }
    function deleteArticle(ele) {
        let id = $(ele).attr("articleId");
        $('#modal-small').modal('show');
        $("#articleId").val(id);
        $("#deleteArticle").attr("action", "/admin/article");
    }
    function changeTop(ele) {
        let top = $(ele).attr("top");

        $.ajax({
            type: "post",
            url: "/admin/article/top",
            data: {
                "articleId": $(ele).attr("articleId"),
                "top": top
            },
            success: function (data) {
                if (data.code == 200) {
                    $("#alert-success").fadeIn();
                    setTimeout(function() {
                        $("#alert-success").fadeOut();
                    }, 1000);
                } else {
                    $("#alert-fail").fadeIn();
                    setTimeout(function () {
                        $("#alert-fail").fadeOut();
                    }, 800);
                }
                window.location.reload();
            },
            error: function (data) {
                $("#alert-fail").fadeIn();
            }
        })
    }
</script>
</body>
</html>
